<template>
  <!-- 文字上传，用于table单元格上传 -->
  <div class="manual-upload">
    <ul v-if="fileList?.length > 0" class="file-list">
      <li v-for="(file, index) in fileList" :key="index">
        <img src="@/assets/image/icon_pdf.png" />
        <!-- <el-tooltip placement="top" :content="file.name"> -->
        <span
          :class="file.link ? 'file-list-name-cursor' : 'file-list-name'"
          @click="handleFileView(file.link)"
          >{{ file.name }}</span
        >
        <!-- </el-tooltip> -->
      </li>
    </ul>
    <div :class="fileList > 0 ? 'width30' : 'width-all'">
      <upload-base ref="dragRef" v-model="fileList" :limit="1" v-bind="attrs">
        <img v-if="fileList?.length > 0" src="@/assets/image/icon_Upload_small.png" />
        <el-button type="primary" link v-else>Upload</el-button>
      </upload-base>
    </div>
  </div>
</template>
<script setup>
import UploadBase from './UploadBase.vue';
import { vModelValue } from '@/utils/hooks.js';
import { useAttrs } from 'vue';

const props = defineProps({
  modelValue: {
    type: Array,
    default: [],
  },
});
const emits = defineEmits(['update:modelValue']);

const dragRef = ref();
const attrs = useAttrs();

const { newValue: key } = vModelValue(props, emits);
let fileList = ref(key);

// 查看附件
function handleFileView(url) {}
</script>

<style lang="scss" scoped>
.manual-upload {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  width: 100%;
}
.file-list {
  flex: 1;
  margin-right: 6px;
  overflow: hidden;
  li {
    display: flex;
    align-items: center;
    .file-list-name,
    .file-list-name-cursor {
      flex: 1;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      text-align: left;
    }

    .file-list-name-cursor {
      cursor: pointer;
    }
  }
}
.width-all {
  // width: 100%;
}

.width30 {
  width: 30px;
}
</style>
